<template>
  <div class="app-container">
    <el-row >
      <el-col :span="4">
        <el-button v-permission="['0020101']" @click="toAdd(null)">添加部门</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table
          :data="data"
          :tree-props="{children: 'children'}"
          row-key="id"
          default-expand-all
          border>
          <el-table-column label="名称">
            <template slot-scope="scope">
              <span>{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button v-permission="['0020101']" type="text" @click="toAdd(scope.row)">添加子部门</el-button>
              <el-button v-permission="['0020102']" type="text" @click="toEdit(scope.row)">修改</el-button>
              <el-button v-permission="['0020103']" v-if="!scope.row.children" type="text" @click="remove(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!-- -->
    <el-dialog :visible.sync="dialogFormVisible" title="部门">
      <el-form ref="editForm" :model="form" label-width="180px">
        <input :value="form.id" type="hidden">
        <el-form-item v-show="formOperate==='add'" label="上级节点" prop="pid">
          <el-input v-model="form.pName" autocomplete="off" readonly="readonly"/>
          <input :value="form.pid" type="hidden">
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name" autocomplete="off"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="hideAddOrEditDialog">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
    <!-- -->
  </div>
</template>

<script>
import treeTable from '@/components/TreeTable'
import departmentApi from '@/api/sys/department'

export default {
  name: 'DepartmentList',
  components: { treeTable },
  data() {
    return {
      expandAll: false,
      dialogFormVisible: false,
      formOperate: 'add',
      form:
          {
            name: '',
            pName: '',
            id: '',
            pid: 0
          },
      data: []
    }
  },
  mounted() {
    this.search()
  },
  methods: {
    // 重置表单
    resetForm() {
      if (this.$refs['editForm']) {
        this.$refs['editForm'].resetFields()
        this.form.id = ''
        this.form.pid = 0
      }
    },
    // 转到添加
    toAdd(row) {
      this.showAddOrEditDialog()
      if (row !== undefined && row !== null) {
        var parentNode = row
        this.form.pName = parentNode.name
        this.form.pid = parentNode.id
      } else {
        this.form.pName = ''
        this.form.pid = 0
      }
      this.formOperate = 'add'
    },
    // 转到修改
    toEdit(row) {
      var node = row
      this.showAddOrEditDialog()
      this.form.name = node.name
      this.form.id = node.id
      this.formOperate = 'edit'
    },
    // 线索对话框
    showAddOrEditDialog() {
      this.resetForm()
      this.dialogFormVisible = true
    },
    // 隐藏对话框
    hideAddOrEditDialog() {
      this.dialogFormVisible = false
    },
    // 表单保存
    save() {
      if (this.formOperate === 'add') {
        this.add()
      } else if (this.formOperate === 'edit') {
        this.edit()
      }
    },
    // 添加
    add() {
      departmentApi.add(this.form).then(response => {
        if (response.data.code === 200) {
          this.$message.success('添加成功')
          this.hideAddOrEditDialog()
          this.search()
        } else {
          this.$message.error(response.data.msg)
        }
      })
    },
    // 修改
    edit() {
      departmentApi.edit(this.form).then(response => {
        if (response.data.code === 200) {
          this.$message.success('修改成功')
          this.hideAddOrEditDialog()
          this.search()
        } else {
          this.$message.error(response.data.msg)
        }
      })
    },
    // 删除
    remove(row) {
      this.$confirm('确定要删除部门？', '警告').then(() => {
        departmentApi.remove(row.id).then(response => {
          if (response.data.code === 200) {
            this.$message.success('删除成功')
            this.search()
          } else {
            this.$message.error(response.data.msg)
          }
        })
      })
    },
    // 权限列表
    search() {
      departmentApi.list().then(response => {
        if (response.data.code === 200) {
          this.data = response.data.data
        } else {
          this.$message.error(response.data.msg)
        }
      })
    }
  }

}
</script>

<style scoped>
  .el-row {
    margin-bottom: 20px;
  }
</style>
